<template>
    <XiaDanHeaderComzxw/>
    <div id="list">
        <ul>
            <li v-for="item of this.list" :key="item.id">
                <div class="pic">
                    <img :src="item.imgUrl" alt="">
                </div>
                <div class="infor">
                    <p>{{item.name}}</p>
                    <p class="price">￥{{item.newprice}}</p>
                    <span>X{{item.count}}</span>
                </div>
            </li>
        </ul>
    </div>
    <PayForFooterCom :total="total"/>
</template>

<script>
    import XiaDanHeaderComzxw from "../components/XiaDan/XiaDanHeaderComzxw.vue";
    import PayForFooterCom from "../components/PayFor/PayForFooterCom.vue";
    export default {
        name: "PayForView",
        data(){
            return{
                list:[],
                total:this.$route.query.total
            }
        },
        mounted() {
            for(let i=0;i<this.$route.query.id.length;i++){
                console.log(this.$route.query.id[i])
                for(let item of this.$store.state.shopCart){
                    if(item.id===this.$route.query.id[i]){
                        this.list.push(item)
                    }
                }
            }
        },
        components:{
            XiaDanHeaderComzxw,
            PayForFooterCom
        },
        beforeCreate() {
            document.body.style.backgroundColor = '#F4F4F4'
        },
        beforeUnmount() {
            document.body.style.backgroundColor = '#fff'
        },

    }
</script>

<style scoped>
    #list{
        width: 100%;
        height: auto;
        background:#fff;
        position: relative;
    }
    ul{
        width: 100%;
        height: 100%;
        position: relative;
    }
    li{
        width: 100%;
        height: 30vw;
        display: flex;
        border-bottom: 2px solid lightgrey;
        margin-bottom: 10px;
        position: relative;
    }
    .pic{
        width: 25%;
        height: 80%;
    }
    .infor{
        width: 75%;
        height: 80%;
        position: relative;
    }
    img{
        width: 100%;
    }
    .price{
        position: absolute;
        bottom: 10%;
    }
    .infor>span{
        position: absolute;
        right: 1%;
        top: 45%;
    }
</style>